<template>
  <movie-header-backup></movie-header-backup>
  
  <!-- Hero Section -->
  <section class="relative min-h-[40vh] flex items-center justify-center text-center px-4 overflow-hidden mt-16">
    <div class="absolute inset-0 bg-gray-900 opacity-90 z-0"></div>
    <div class="max-w-4xl mx-auto relative z-10">
      <h1 class="text-5xl md:text-7xl font-bold mb-6 text-white">
        <span class="gradient-text">探索电影世界</span>
      </h1>
      <p class="text-xl text-gray-200 mb-10">发现最新、最热门的电影，开启您的观影之旅</p>
      
      <!-- Search Bar -->
      <div class="flex justify-center mb-8">
        <div class="relative w-full max-w-xl">
          <input 
            type="text" 
            placeholder="搜索电影..." 
            @keydown="searchButtonDown" 
            v-model="search"
            class="w-full px-6 py-4 rounded-full bg-white/20 backdrop-blur-sm text-white placeholder-gray-300 border border-white/30 focus:outline-none focus:ring-2 focus:ring-white/50 transition-all"
          />
          <i class="fas fa-search absolute right-6 top-1/2 transform -translate-y-1/2 text-white/70"></i>
        </div>
      </div>
    </div>
  </section>
  
  <!-- Movie Grid Section -->
  <section class="py-12 bg-gray-900">
    <div class="max-w-7xl mx-auto px-4">
      <!-- Movie Grid -->
      <div class="grid grid-cols-3 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-8">
        <div 
          v-for="(movie, index) in movies" 
          :key="index" 
          @click="goToMovieDetail(movie.movieId)"
          class="bg-gray-800 rounded-xl overflow-hidden shadow-lg card-hover-effect cursor-pointer"
        >
          <div class="relative overflow-hidden">
            <img 
              :src="getPosterUrl(movie.posterName)" 
              alt="Movie Poster" 
              class="w-full h-80 object-cover transition-transform duration-500 hover:scale-110"
            />
            <div class="absolute top-2 right-2 bg-black/70 text-yellow-400 px-2 py-1 rounded-lg text-sm font-bold">
              {{ movie.rate }} <i class="fas fa-star text-xs ml-1"></i>
            </div>
          </div>
          <div class="p-4">
            <h3 class="text-xl font-bold text-white mb-2 truncate">{{ movie.movieName }}</h3>
            <p class="text-gray-400 text-sm mb-2">
              <span class="inline-block bg-gray-700 rounded-full px-3 py-1 text-sm font-semibold text-gray-300 mr-2 mb-2">
                {{ transformGerne(movie.genre) }}
              </span>
            </p>
          </div>
        </div>
      </div>
      
      <!-- Pagination -->
      <div class="flex justify-center items-center mt-12">
        <button 
          @click="prevPage" 
          :disabled="currentPage === 1" 
          class="px-6 py-2 rounded-lg bg-gray-800 text-white hover:bg-gray-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed mr-4"
        >
          <i class="fas fa-chevron-left mr-2"></i> 上一页
        </button>
        <span class="text-white text-lg font-medium">{{ currentPage }} / {{ totalPages }}</span>
        <button 
          @click="nextPage" 
          :disabled="currentPage === totalPages" 
          class="px-6 py-2 rounded-lg bg-gray-800 text-white hover:bg-gray-700 transition-colors disabled:opacity-50 disabled:cursor-not-allowed ml-4"
        >
          下一页 <i class="fas fa-chevron-right ml-2"></i>
        </button>
      </div>
    </div>
  </section>
</template>

<script>
import axios from 'axios';
import MovieFooter from './MovieFooter.vue';
import MovieHeaderBackup from './MovieHeaderBackup.vue';
import config from '@/config';

export default {
  components: {
    MovieFooter,
    MovieHeaderBackup
  },
  data() {
    return {
      movies: [],
      currentPage: 1,
      totalPages: 5,
      search: '',
      gerneDir: ["动作", "剧情", "喜剧", "恐怖", "科幻", "爱情", "惊悚", "动画",
        "纪录片", "奇幻", "冒险", "悬疑", "犯罪", "音乐", "战争", "传记"
      ]
    };
  },
  created() {
    this.fetchMovies();
  },
  methods: {
    async fetchMovies() {
      try {
        const response = await axios.get(`${config.url}movies/${this.currentPage}`);
        if (response.data.code === 200) {
          this.movies = response.data.data.list;
          this.totalPages = response.data.data.pages;
        } else {
          alert('Failed to fetch movies');
        }
      } catch (error) {
        console.error('Error fetching movies:', error);
      }
    },
    prevPage() {
      if (this.currentPage > 1) {
        this.currentPage--;
        this.fetchMovies();
      }
    },
    nextPage() {
      if (this.currentPage < this.totalPages) {
        this.currentPage++;
        this.fetchMovies();
      }
    },
    goToMovieDetail(movieId) {
      this.$router.push(`/movie/${movieId}`);
    },
    getPosterUrl(posterName) {
      return require(`@/assets/img/movie_posts/${posterName}`);
    },
    searchButtonDown(event) {
      if (event.code == "Enter") {
        // 如果没有输入，就退回主页
        if (this.search.length == 0) {
          this.$router.push("/");
        } else {
          this.$router.push(`/searchMovies/${this.search}`);
        }
      }
    },
    transformGerne(genreNum) {
      return this.gerneDir[genreNum - 1];
    }
  }
};
</script>

<style lang="scss" scoped>
.transition-colors {
  transition-property: color;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-transform {
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 500ms;
}

.hover\:scale-110:hover {
  transform: scale(1.1);
}

.truncate {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cursor-pointer {
  cursor: pointer;
}
</style>
